<template>
  <div>
    <el-card style="margin: 10px;">
      <el-row :gutter="20" >
        <el-col :span="8">
          <div>昨日预估收益</div>
          <div style="font-size: 30px;margin-top: 5px;"><b>¥{{sumobj.sumd}}</b></div>
        </el-col>
        <el-col :span="8">
          <div>七日预估收益</div>
          <div style="font-size: 30px;margin-top: 5px;"><b>¥{{sumobj.sums}}</b></div>
        </el-col>
        <el-col :span="8">
          <div>30日累计预估收益</div>
          <div style="font-size: 30px;margin-top: 5px;"><b>¥{{sumobj.summ}}</b></div>
        </el-col>
      </el-row>
    </el-card>
    <el-card style="margin: 10px;">
      <div ref="chartContainer" style="width: 100%; height: 530px;"></div>
    </el-card>
  </div>
</template>
<script>
import {dsp_report_index} from "@/api/dsp_report";

export default {
  name: 'index-report',
  data(){
    return {
      sumobj:{
        sumd:0,
        summ:0,
        sums:0,
      },
      // sectimes:[new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 ),new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 )],
      // pickerOptions: {
      //   shortcuts: [{
      //     text: '最近一周',
      //     onClick(picker) {
      //       const end = new Date();
      //       const start = new Date();
      //       start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      //       picker.$emit('pick', [start, end]);
      //     }
      //   }, {
      //     text: '最近一个月',
      //     onClick(picker) {
      //       const end = new Date();
      //       const start = new Date();
      //       start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      //       picker.$emit('pick', [start, end]);
      //     }
      //   }, {
      //     text: '最近三个月',
      //     onClick(picker) {
      //       const end = new Date();
      //       const start = new Date();
      //       start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      //       picker.$emit('pick', [start, end]);
      //     }
      //   }]
      // },
      echarts_option : {
        title: {
          text: '七日数据走势'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['请求', '填充', '曝光', '点击', '唤醒','金额(元)']
        },
        grid: {
          left: '2%',
          right: '3%',
          bottom: '2%',
          containLabel: true
        },
        toolbox: {},
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '请求',
            type: 'line',
            stack: 'Total',
            smooth: true,
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '填充',
            type: 'line',
            stack: 'Total',
            smooth: true,
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '曝光',
            type: 'line',
            stack: 'Total',
            smooth: true,
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '点击',
            type: 'line',
            stack: 'Total',
            smooth: true,
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '唤醒',
            type: 'line',
            stack: 'Total',
            smooth: true,
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          },
          {
            name: '金额(元)',
            type: 'line',
            stack: 'Total',
            smooth: true,
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      }
    }
  },
  computed: {},
  components: {},
  mounted(){
    this.GetList()
  },
  created() {
  },
  methods: {
    //图表初始化
    initEcharts(){
      const chartContainer = this.$refs.chartContainer;
      if (chartContainer) {
        this.$echarts.init(chartContainer).setOption(this.echarts_option,true,false)
      }else {
        console.log("44444")
      }
    },
    //获取列表
    GetList(){
      dsp_report_index({}).then(res => {
        var data = res.data
        this.sumobj = data['sumobj']
        this.echarts_option.xAxis.data =data['x']
        this.echarts_option.series[0].data =data['y'][0]
        this.echarts_option.series[1].data =data['y'][1]
        this.echarts_option.series[2].data =data['y'][2]
        this.echarts_option.series[3].data =data['y'][3]
        this.echarts_option.series[4].data =data['y'][4]
        this.echarts_option.series[5].data =data['y'][5]
        this.initEcharts()
      }).catch(err => {
        console.log(err)
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.task-manage-container {
  .el-table{
    border-radius: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    ::v-deep .el-table__header tr th{
      background: #f5f5f5;
    }
  }
}
.search-line{
  margin: 0px;
  display: flex;
  align-items: center;
}
.search-line > div {
  margin-right: 10px;
}

.drawer-all {
  margin: 0 10px;
  height: calc(100vh - 80px);
  overflow: auto;
}
.drawer-contain {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 10px;
}
.drawer-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 10px;
  border: 1px solid #eaeaea;
}
.drawer-line-title {
  font-size: 14px;
  font-weight: bold;
  margin: 10px 0;
}
.drawer-line-chk {
  margin: 10px 10px 10px 0;
  width: 150px;
}
.right-title {
  width: 260px;
  border-left: 1px solid #eaeaea;
  text-align: left;
  padding: 12px;
}
.right-box-tips {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 6px;
  font-size: 12px;
  color: #919191;
}
.right-box-tips span {
  cursor: pointer;
  color: #409EFF;
}
.right-box {
  width: 260px;
  padding: 5px;
  border: 1px solid #efefef;
  border-top: none;
  min-height: calc(100vh - 120px);
}
.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  min-height: 20px
}
.list-group-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  margin-bottom: 2px;
  width: 240px;
  background-color: #fff;
  border: 1px solid rgba(0,0,0,.125);
  cursor: all-scroll;
  border-radius: 5px;
}
.drawer-contain-left {
  flex: 1;
  margin: 10px 20px;
}
.close-icon {
  margin-left: 10px;
  color: #989898;
  cursor: pointer;
}
.close-icon :hover {
  color: #409EFF;
}
</style>